<template>
  <div class="choiceGoods">
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="780px"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="门店名称：">
              <el-input v-model="ruleForm.shopName" placeholder="请输入门店名称">
                <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选门店', '已选门店']"
              :button-texts="['到左边', '到右边']"
      
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
              }"
              :data="dataList"
            ></el-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSure()" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  platformgoodscategorytree,
  platformGoodsInfoList,
  getPlatformShopInfo
} from "@/api/shop/platformProcurementInventory/platformStockOutList.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: "",
      loading: false,
      labelWidth: "120px",
      rules: {

      },
      ruleForm: {
        chioseVal: [],
        chioseShops: [],
      },
      dataVal: [
        {
          shopName: "门店1",
          shopId: "1",
        },
        {
          shopName: "门店2",
          shopId: "2",
        },
        {
          shopName: "门店3",
          shopId: "3",
        },
        {
          shopName: "门店4",
          shopId: "4",
        },
      ],
      dataList: [
        
      ],
      shopOriList:[]
    };
  },
  mounted(){
    this.getPlatformShopInfo()
  },
  methods: {
    getPlatformShopInfo(){
      console.log(this.ruleForm)
      
      getPlatformShopInfo(this.ruleForm).then(result=>{
        console.log('getPlatformShopInfo',result)
        this.dataList = []
        result.data.data.forEach(ele=>{

          this.dataList.push({key:ele.shopId,label:ele.shopName})
        })
        this.shopOriList = result.data.data
      })
    },
    getList(shopId) {
      platformgoodscategorytree({ businessType: "" }).then((val) => {
        //商品类目
        let data = val.data.data;
        console.log(data);
        this.categoryIdList = data.map((item) => {
          return {
            value: item.categoryId,
            label: item.categoryName,
            children: item.children.map((items) => {
              return {
                value: items.categoryId,
                label: items.categoryName,
              };
            }),
          };
        });
      });
      this.getGoods({ shopId: shopId });
    },
    handleSure() {
      console.log('handleSure',this.ruleForm)
      this.ruleForm.chioseShops = []
      this.ruleForm.chioseVal.forEach(ele=>{
        console.log('handleSure22',ele)
        this.shopOriList.forEach(shop=>{
       if(ele === shop.shopId){
         console.log('handleSure22')
          this.ruleForm.chioseShops.push(shop)
       }
        })
 
      })
      console.log('handleSure1',this.ruleForm)
      this.$emit("trigger", this.ruleForm);
      this.handleClose();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleChange() {},
    chioseShops(e) {
      this.ruleForm.chioseShops = [];
      console.log(e);
      e.forEach((item) => {
        this.dataVal.forEach((items) => {
          if (items.shopId == item) {
            this.ruleForm.chioseShops.push(items);
          }
        });
      });
      console.log("12312", this.ruleForm.chioseShops);
    },
    // getGoods(obj) {
    //   platformGoodsInfoList(obj).then((val) => {
    //     let data = val.data.data;
    //     this.dataVal = val.data.data;
    //     this.dataList = data.map((item) => {
    //       return {
    //         key: item.goodsId,
    //         label: item.goodsName,
    //       };
    //     });
    //   });
    // },
    onSearch() {
      this.getPlatformShopInfo();
    },
  },
};
</script>

<style>
</style>